<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

const pageTabsNav = ['按时间统计','按煤种统计','按供应商统计']
const pageTabsIndex = ref(0)
function clickPageTabs(index:number){
    pageTabsIndex.value = index
    if(pageTabsIndex.value == 0)
    {
        if(timeTabsIndex.value == 0)
        {
            initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')

        }
        else if(timeTabsIndex.value == 1){
            const array1To30: string[] = [];
            for (let i = 1; i <= 30; i++) {
                array1To30.push(`${i}`);
            }
            initChart(array1To30,[4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,5320,4000,5000,4500,3000,4200],'入厂煤量统计')

        }
    }
    else if(pageTabsIndex.value == 1){
        initChart(['褐煤','平煤','气煤','平煤','无烟煤','平煤','平煤','中煤','平准二煤'],[4000,5000,4500,3000,4200,4800,5320,4000,5000],'本月入厂煤量统计-按煤质分类')
    
    }
    else if(pageTabsIndex.value == 2){
        initChart(['华安','可门','辽东','归口','海宁','翼翼们','刘口子','张家门','海归来'],[3000,4200,4800,4000,5000,4500,5320,4000,5000],'本月入厂煤量统计-按供应商分类')
    
    }  
    
}

const timeTabsNav = ['近12个月','近30天']
const timeTabsIndex = ref(0)
function clickTimeTabs(index:number){
    timeTabsIndex.value = index
    if(timeTabsIndex.value == 0)
    {
        initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')

    }
    else if(timeTabsIndex.value == 1){
        const array1To30: string[] = [];
        for (let i = 1; i <= 30; i++) {
            array1To30.push(`${i}`);
        }
        initChart(array1To30,[4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200,5320,4000,5000,4500,3000,4200],'入厂煤量统计')

    }
    
}

//图表初始化
function initChart(xData: string[],yData: number[],title?:string){
    //const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //const yData = [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200]
    const barChart = echarts.init(document.getElementById('statsChart'));
    // 绘制图表
    barChart.setOption({
        title: {
            text: title,
            left: 'center',
            top: '3%'
        },
        grid: {
            left: '4%',
            top: '15%',
            right: '4%',
            bottom: '6%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            right: '1%',
            data: ['实际来煤', '计划来煤']
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '实际来煤',
                type: 'bar',
                tooltip: {},
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#317DF7'
                        },
                        {
                            offset: 1,
                            color: '#88B4FA'
                        }
                    ])
                },
                data: yData
            },
            {
                name: '计划来煤',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {},
                colro:['#F49F17'],
                itemStyle: {
                    color: '#F49F17'
                },
                data: yData
            }
        ]
    });
}

onMounted(() => {
    initChart(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [4000,5000,4500,3000,4200,4800,5320,4000,5000,4500,3000,4200],'入厂煤量统计')

});

const monthVal = ref('')
</script>
<template>
<div class="flex_bg">

    <ul class="page_tabs">
        <li v-for="(item,index) in pageTabsNav" @click="clickPageTabs(index)" :class="pageTabsIndex == index?'hover':''">{{ item }}</li>
    </ul>
    <div style="position: relative;">
        <ul class="time_tabs" v-if="pageTabsIndex == 0">
            <li v-for="(item,index) in timeTabsNav" @click="clickTimeTabs(index)" :class="timeTabsIndex == index?'hover':''">{{ item }}</li>
        </ul>
        <div class="date_month" v-if="pageTabsIndex == 1||pageTabsIndex == 2">
            <el-date-picker
            v-model="monthVal"
            type="month"
            placeholder="选择日期/月份"
            />
        </div>

        <div class="chart_main" id="statsChart"></div>
    </div>
    <div v-if="pageTabsIndex == 0" class="table_info mt15">
        <table>
            <tr>
                <th>月</th>
                <th>一月</th>
                <th>二月</th>
                <th>三月</th>
                <th>四月</th>
                <th>五月</th>
                <th>六月</th>
                <th>七月</th>
                <th>八月</th>
                <th>九月</th>
                <th>十月</th>
                <th>十一月</th>
                <th>十二月</th>
            </tr>
            <tr>
                <th>计划来煤(万吨)</th>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <th>实际来煤(万吨)</th>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <th>去年同期增加</th>
                <td><p class="green">+2%</p></td>
                <td><p class="yellow">-5%</p></td>
                <td><p class="green">+2%</p></td>
                <td><p class="yellow">-5%</p></td>
                <td><p class="green">+2%</p></td>
                <td><p class="yellow">-8%</p></td>
                <td><p class="green">+2%</p></td>
                <td><p class="yellow">-5%</p></td>
                <td><p class="green">+10%</p></td>
                <td><p class="yellow">-5%</p></td>
                <td><p class="green">+10%</p></td>
                <td><p class="yellow">-5%</p></td>
            </tr>
        </table>
    </div>

    <div v-if="pageTabsIndex == 1" class="table_info mt15">
        <table>
            <tr>
                <th>煤种</th>
                <th>存量</th>
                <th>计划来煤</th>
                <th>实际来煤</th>
                <th>偏差</th>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="yellow">-998</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="yellow">-198</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="yellow">-998</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>平煤</td>
                <td>4390</td>
                <td>4390</td>
                <td>4390</td>
                <td><p class="yellow">-198</p></td>
            </tr>
        </table>
    </div>

    <div v-if="pageTabsIndex == 2" class="table_info mt15">
        <table>
            <tr>
                <th rowspan="2">供应商名称</th>
                <th colspan="2">计划</th>
                <th colspan="2">实际</th>
                <th colspan="2">偏差</th>
            </tr>
            <tr>
                <th>到厂时间</th>
                <th>来煤重量</th>
                <th>到厂时间</th>
                <th>来煤重量</th>
                <th>到厂时间</th>
                <th>来煤重量</th>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
            <tr>
                <td>华安</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td>2023-06-30</td>
                <td>6290</td>
                <td><p class="red">延迟一天</p></td>
                <td><p class="green">+429</p></td>
            </tr>
        </table>
    </div>

</div>
</template>
<style scoped lang="scss">
.chart_main{
    width: 100%;
    height: 500px;
}
.date_month{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
}
.time_tabs{
    position: absolute;
    left: 20px;
    top:15px;
    z-index: 9;
    display: flex;
    align-items: center;
    li {
        width: 100px;
        line-height: 32px;
        text-align: center;
        background: url('../../assets/img/ico_btn1.png') no-repeat;
        background-size: 100% 100%;
        font-weight: 400;
        font-size: 15px;
        color: #2565C8;
        cursor: pointer;
        border-radius: 20px;
        margin-right: 10px;

        &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        &.hover {
            background: url('../../assets/img/ico_btn1a.png') no-repeat;
            background-size: 100% 100%;
            color: #fff;
        }
    }
}
.page_tabs{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 2px solid #E0E5ED;
    height: 60px;
    margin-top: -10px;
    li{
        font-weight: bold;
        font-size: 18px;
        color: #3D4755;
        line-height: 60px;
        position: relative;
        padding:0 20px;
        flex-shrink: 0;
        margin-right: 20px;
        cursor: pointer;
        &.hover::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            border-bottom: 3px solid #2565C8;
        }
    }
}
</style>